import React, { memo, useState } from 'react'
import { Card, Button, Modal, Divider, Form, message } from 'antd'
import '../css/account.css'
import { useSelector } from 'react-redux'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import dayjs from 'dayjs';
import axios from 'axios';
import { sendCaptcha } from '../../../api/login';
import { updatePwdInfo,updatePhoneInfo,updateEmailInfo } from '../../../api/account';
const account = memo(() => {
  const userInfo = useSelector(state => state.user)
  const [value, setValue] = useState('')
  const [disableda, setDisableda] = useState(false)
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [pwd, setPwd] = useState(0)
  const [messageApi, contextHolder] = message.useMessage();
  const [isShow, setIsShow] = useState(false)
  const [loadingsa, setLoadingsa] = useState(false);
  const [valb, setValb] = useState('')
  const [vala, setVala] = useState('')
  const formRef=React.createRef()
  const handleChangeb = (v) => {
    setValb(v.target.value)
  }
  const showModal = (p) => {
    // formRef.current.resetFields();
    console.log(formRef.current)
    if(formRef.current!==null){
      formRef.current.resetFields()
    }
    if (p == 0) {
      setIsModalOpen(true);
      setPwd(0)
    } else if (p == 1) {
      setIsModalOpen(true);
      setPwd(1)
    } else if (p == 2) {
      setIsModalOpen(true);
      setPwd(2)
    } else if (p == 3) {
      setIsModalOpen(true);
      setPwd(3)
    }

  };
  const handleOk = () => {
    setValue('')
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setValue('')
    setPwd(0)
    setIsModalOpen(false);
  };
  const onSearch = (e) => {
    setValue(e.target.value)
  }
  const profile = useSelector(state => state.profile)

  const onFinish = (values) => {
    const updateInfo = { ...values }
    console.log('打印当前修改状态',pwd)
    console.log(updateInfo)
    if(pwd==0){
      updatePwdInfo(updateInfo).then(function (response) {
        //  messageApi.success(response.data.errorMessage ? response.data.errorMessage : '提交成功')
        if (response.data.success == true) {
          messageApi.success('提交成功')
          setIsModalOpen(false);
        } else {
          messageApi.error(response.data.errorMessage)
        }
      }).catch(function (error) {
        console.log(error);
      });
    }else if(pwd==1){

      updatePhoneInfo(updateInfo).then(function (response) {
        //  messageApi.success(response.data.errorMessage ? response.data.errorMessage : '提交成功')
        if (response.data.success == true) {
          messageApi.success('提交成功')
          setIsModalOpen(false);
        } else {
          messageApi.error(response.data.errorMessage)
        }
      }).catch(function (error) {
        console.log(error);
      });

    }else if(pwd==2){
      updateEmailInfo(updateInfo).then(function (response) {
        //  messageApi.success(response.data.errorMessage ? response.data.errorMessage : '提交成功')
        if (response.data.success == true) {
          messageApi.success('提交成功')
          setIsModalOpen(false);
        } else {
          messageApi.error(response.data.errorMessage)
        }
      }).catch(function (error) {
        console.log(error);
      });
    }
    // console.log('Success:', values);
    formRef.current.resetFields();
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  //忘记密码获取验证码
  const getCodera = () => {
    sendCaptcha(vala).then((res) => {
      if (!res.data.success) {
        messageApi.error(res.data.errorMessage)
      } else {
        messageApi.info('验证码已发送');
      }
      setLoadingsa(false)
      setDisableda(false)
    }).catch(err => {
      setLoadingsa(false)
      setDisableda(false)
    })
  }
  const handleChangea = (v) => {
    setVala(v.target.value)
  }
  return (
    <div>
      {contextHolder}
      <Card title='账号设置'>
        <>
          <div className='account-item'>
            <div>密 码</div>
            <div>
              存在风险，立即重置
              <Button onClick={() => showModal(0)} type='link'>
                修改密码
              </Button>
            </div>
          </div>
          <Divider />
          <div className='account-item'>
            <div>手机</div>
            <div>
              {profile.profile.result?.phone}
              <Button onClick={() => showModal(1)} type='link'>
                修改手机
              </Button>
            </div>
          </div>
          <Divider />
          <div className='account-item'>
            <div>邮箱</div>
            <div>
              存在风险，绑定邮箱
              <Button onClick={() => showModal(2)} type='link'>
                绑定邮箱
              </Button>
            </div>
          </div>
          <Divider />
          {/* <div className='account-item'>
            <div>账号注销</div>
            <div>

              <Button onClick={() => showModal(3)} type='link'>
                立即注销
              </Button>
            </div>
          </div> */}
        </>
      </Card>

      <Modal title={pwd == 0 ? '密码' : pwd == 1 ? "手机" : pwd == 2 ? "邮箱" : "注销账号"} cancelText='取消' okText='关闭' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          ref={formRef}
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label={pwd == 0 ? '旧密码' : pwd == 1 ? "手机" : pwd == 2 ? "邮箱" : ""}
            name={pwd == 0 ? 'old_password' : pwd == 1 ? "phone" : pwd == 2 ? "email" : ""}
            rules={[
              {
                required: true,
                message: '请输入旧密码!',
              },
            ]}
          >
            <Input value={vala} onChange={(value) => handleChangea(value)} />
          </Form.Item>
          {pwd!==0? <Form.Item
           
            name="code"
            rules={[
              {
                required: true,
                message: `请输入验证码!'}`,
              },
            ]}
            label="验证码"
          >
            <div style={{ display: 'flex', gap: '5px' }}>
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="code"
                value={valb}
                onChange={(value) => handleChangeb(value)}
                placeholder={`请输入${isShow ? '密码' : '验证码!'}`}
              />
              {
                isShow ? '' : <Button disabled={disableda} loading={loadingsa} onClick={() => getCodera()} type='primary'>获取验证码</Button>
              }
            </div>
          </Form.Item>:''
          }
         
          <Form.Item
            label={pwd == 0 ? '新密码' : pwd == 1 ? "手机" : pwd == 2 ? "邮箱" : ""}
            name={pwd == 0 ? 'password' : pwd == 1 ? "new_phone" : pwd == 2 ? "new_email" : ""}
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>

    </div>
  )
})

export default account
